import { BasicDrawer, useDrawerInner } from "@/components/Drawer";
import { BasicForm, FormSchema, useForm } from "@/components/Form";
import { message } from "antd";
import { useTranslation } from "react-i18next";
import { useState, useMemo, useEffect } from "react";
import { handleTree } from "@/utils/tree";
import { createMenu, getMenuList, updateMenu } from "@/api/system/menu";
let reload: Function;
let id: any;
const index = (props: { register: Fn }) => {
	const [isUpdated, setIsUpdated] = useState(false);
	const { t } = useTranslation();
	const [treeData, setTreeData] = useState([]);
	const formSchema: FormSchema[] = [
		{
			label: t("system.menu.managerMenu"),
			field: "parentId",
			component: "TreeSelect",
			componentProps: {
				treeData,
				fieldNames: {
					value: "id",
					label: "name"
				}
			}
		},
		{
			label: t("system.menu.type"),
			field: "type",
			component: "RadioGroup",
			componentProps: {
				options: [
					{
						label: t("system.menu.contents"),
						value: 1
					},
					{
						label: t("system.menu.menu"),
						value: 2
					},
					{
						label: t("system.menu.button"),
						value: 3
					}
				]
			}
		},
		{
			label: t("system.menu.name"),
			field: "name",
			component: "Input"
		},
		{
			label: t(`system.menu.icon`),
			field: "icon",
			component: "Input"
		},
		{
			label: t(`system.menu.sort`),
			field: "sort",
			component: "InputNumber"
		},
		{
			label: t(`system.menu.path`),
			field: "path",
			component: "Input"
		},
		{
			label: t(`system.menu.permission`),
			field: "permission",
			component: "Input"
		},
		{
			label: t(`system.menu.component`),
			field: "component",
			component: "Input"
		},
		{
			label: t(`system.menu.componentName`),
			field: "componentName",
			component: "Input"
		},
		{
			label: t("system.menu.status"),
			field: "status",
			component: "RadioGroup",
			componentProps: {
				options: [
					{
						label: t("system.menu.open"),
						value: 0
					},
					{
						label: t("system.menu.close"),
						value: 1
					}
				]
			}
		},
		{
			label: t("system.menu.alwaysShow"),
			field: "alwaysShow",
			component: "Switch",
			componentProps: {
				checkedChildren: t("system.menu.display"),
				unCheckedChildren: t("system.menu.hide")
			}
		},
		{
			label: t("system.menu.keepAlive"),
			field: "keepAlive",
			component: "Switch",
			componentProps: {
				checkedChildren: t("system.menu.cache"),
				unCheckedChildren: t("system.menu.noCache")
			}
		}
	];
	const getTitle = useMemo(() => {
		return isUpdated ? t("felix_ui.edit") : t("felix_ui.add");
	}, [isUpdated]);
	const [register, { validateFields, setFieldsValue, resetFields }] = useForm({
		schemas: formSchema,
		labelWidth: 120,
		baseColProps: {
			span: 24
		}
	});
	const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(props.register, data => {
		reload = data.reload;
		id = data.record?.id;
		resetFields();
		setDrawerProps({ confirmLoading: true });
		setIsUpdated(!!data?.isUpdated);
		setFieldsValue({
			...data.record
		});
		setDrawerProps({ confirmLoading: false });
	});
	const handleSubmit = async () => {
		const formValue = await validateFields();
		let res;
		if (isUpdated) {
			formValue.id = id;
			res = await updateMenu(formValue);
		} else {
			res = await createMenu(formValue);
		}
		if (!res) {
			message.error(t("viewComponents.patientInformation.additionFailed"));
			return;
		}
		message.success(t("viewComponents.patientInformation.successfullyAdded"));
		closeDrawer();
		reload();
	};
	useEffect(() => {
		const getTreeData = async () => {
			const data = await getMenuList({});
			let root: any = { id: 0, name: "主类目", children: [] };
			root.children = handleTree(data, "id", "parentId");
			let newTreeData = treeData;
			newTreeData.push(root);
			setTreeData(newTreeData);
		};
		getTreeData();
	}, []);
	return (
		<BasicDrawer title={getTitle} showFooter={true} {...props} register={registerDrawer} ok={handleSubmit}>
			<BasicForm register={register} labelWrap={true}></BasicForm>
		</BasicDrawer>
	);
};
export default index;
